<template>
  <div>
    <el-card class="search-card">
      <basic-table-form
        ref="formData"
        isScalingBtn
        :formColumns="formItemList"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      >
        <el-row slot="extensionActions" type="flex">
          <el-button
            v-if="showBtn('批量新增')"
            type="primary"
            @click="handleBatchAdd"
          >批量维护</el-button>
        </el-row>
      </basic-table-form>
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="442"
        :showSelectCol="false"
        :actionColWidth="120"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            v-if="showBtn('新增') && canOpeState"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增商品</el-button
          >
          <el-button
            v-if="showBtn('新增')"
            type="primary"
            size="mini"
            @click="handleBatchGetCategory"
          >批量获取品类</el-button
          >
        </div>
      </basic-table>
    </el-card>
    <batch-maintain-dialog :visible.sync="dialogVisble"></batch-maintain-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicTableForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import batchMaintainDialog from '@/components/common/dialog/batchMaintainDialog';
import { FORM_ITEM_LIST, TABLE_COLUMNS } from './constants';
import basePage from '@/mixins/commodity/basePage';
import { setAuthBtnId } from '@/utils/bizUtils';
import { getCommodityListService } from '@/api/commodity/commodityAccessManage/commodityAdd';
import { getCanOpeState } from '@/utils/getUtils';

export default {
  mixins: [basePage],
  components: {
    BasicTableForm,
    BasicTable,
    batchMaintainDialog
  },
  data () {
    return {
      dialogVisble: false,
      formItemList: FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        selection: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      formData: {
        recordNo: '',
        operName: '',
        operDeptName: '',
        createOpeTime: '',
        createOpeTime2: '',
      },
      canOpeState: true, // 页面可操作状态
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn']),
  },
  created () {
    this.setCanOpeState()
    this.handleQueryForm();
  },
  methods: {
    // 设置页面是否可操作状态值
    async setCanOpeState () {
      this.canOpeState = await getCanOpeState(this.$route.name)
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      return <div class="table-action"><el-button type="text" onClick={() => this.handleViewDetail(row)}>查看单据</el-button></div>;
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        commitTypes: ['PREPARE'],
        ...this.formData,
        ...this.pagination
      };
      setAuthBtnId('查询')
      const retData = await getCommodityListService(
        data,
        state => { this.tableInfo.loading = state; }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    },
    handleAdd () {
      setAuthBtnId('新增')
      this.$router.push({
        path: '/commodity/commodityAccessManage/addCommodity/commodityAdd',
        query: {}
      });
    },
    // 批量获取品类
    handleBatchGetCategory () {
      setAuthBtnId('新增')
      this.$router.push({ name: 'batchGetCategory' })
    },
    handleBatchAdd () {
      setAuthBtnId('批量新增')
      this.dialogVisble = true;
    },
    handleViewDetail (row) {
      this.$router.push({ path: '/commodity/commodityAccessManage/waitAccess/auditing/auditingView', query: { 'recordNo': row.recordNo } })
    },
  }
};
</script>
